{% load i18n %}
{% load static %}

<div class="card"> 
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#graphs" type="button" role="tab" aria-controls="graphs" aria-selected="true">
                    {% trans "Real Time" %}
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#logs" type="button" role="tab" aria-controls="logs" aria-selected="false" onclick="update_logs_table(vname);">
                    {% trans "Logs" %}
                </button>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <p class="text-muted">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="graphs">
                    <div class="mb-1 card border-success">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fa fa-heartbeat" aria-hidden="true"></i>
                                {% trans "CPU Usage" %}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart">
                                    <canvas id="cpuChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-1 card border-danger">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fa fa-microchip" aria-hidden="true"></i>
                                {% trans "Memory Usage" %}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart">
                                    <canvas id="memChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% for net in instance.networks %}
                    <div class="mb-1 card border-info">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fa fa-sitemap" aria-hidden="true"></i>
                                {% trans "Bandwidth Device" %}: eth{{ forloop.counter0 }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart">
                                    <canvas id="netEth{{ forloop.counter0 }}Chart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% for disk in instance.disks %}
                    <div class="mb-1 card border-warning">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fa fa-database" aria-hidden="true"></i>
                                {% trans "Disk I/O device" %}: {{ disk.dev }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart">
                                    <canvas id="blk{{ disk.dev }}Chart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <div class="clearfix"></div>
                </div>
                <div role="tabpanel" class="tab-pane" id="logs">
                    <div class="table-responsive">
                        <table class="table table-striped sortable-theme-bootstrap" id="logs_table" data-sortable>
                            <thead>
                                <tr>
                                    <th scope="col">{% trans "Date" %}</th>
                                    <th scope="col">{% trans "User" %}</th>
                                    <th scope="col">{% trans "Message" %}</th>
                                </tr>
                            </thead>
                            <tbody class="searchable">
                                <tr>
                                    <td colspan="3"><i>{% trans 'None' %}...</i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </p>
    </div>
</div>
{% block script %}
    <script>
        function update_logs_table(vname) {
            // TODO
            logurl = "{% url 'vm_logs' 1 %}".replace(1, vname);
            $.getJSON(logurl, function(data) {
                var logs = "";
                $.each(data, function(id) {
                    row = data[id];
                    // console.log(row);
                    logs += '<tr><td style="width:150px">'+row['date']+'</td>';
                    logs += '<td>'+row['user']+'</td>';
                    logs += '<td>'+row['message']+'</td></tr>';
                });
                $("#logs_table > tbody").html(logs);
            });
        }
    </script>
{% endblock %}
